<!--
 * @Author: wjk
 * @Date: 2019-12-31 13:25:52
 * @LastEditors: wjk
 * @LastEditTime: 2020-11-19 14:21:08
 * @description: swiper-组件
 -->
<template>
  <view class="relative-container">
    <swiper :class="'swiper-container ' + className" :circular="circular" :autoplay="autoplay" :style="swiperStyle" @change="changeItem">
      <swiper-item v-for="(item, index) in swiperList" :key="index" @click="handleItemClick($event, item, index)">
        <slot :item="item" :index="index" :otherParams="otherParams">
          <view :class="item.colorClass" class="swiper-item" :style="'border-radius: '+borderRadius">
            <video v-if="item.media_type === 1" controls="controls" style="width: 100%; height: 100%" :src="item.url"></video>
            <b-image v-else :src="item.url || item.pic || item.imageUrl" :mode="mode" @load="e=>imgload(item,index,e)"/>
          </view>
        </slot>
      </swiper-item>
    </swiper>
    <view v-if="showIndex" class="uni-swiper__index-box">{{ current + 1 }} / {{ swiperList.length }}</view>
    <view v-if="showDots&&!isHome" :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box">
      <view
        v-for="(item,index) in swiperList"
        :key="index"
        :class="[index === current&&'uni-swiper__dots-long']"
        :style="{
          'width':(index === current? dots.width*3:dots.width ) + 'px','height':dots.height +'px' ,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border':index !==current ? dots.border:dots.selectedBorder}"
        class="uni-swiper__dots-item " />
    </view>
    <view v-if="showDots&&isHome && swiperList.length > 1" :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__new-dots-box">
      <view
        v-for="(item,index) in swiperList"
        :key="index"
        :class="[index === current&&'active']"
        class="uni-swiper__dots-item" />
    </view>
  </view>
</template>

<script>
export default {
  name: 'BaseSwiper',
  props: {
    swiperList: {
      type: Array,
      default() {
        return []
      }
    },
    showDots: {
      type: Boolean,
      default: true
    },
    showIndex: {
      type: Boolean,
      default: false
    },
    circular: {
      type: Boolean,
      default: true // 是否循环播放
    },
    autoplay: {
      type: Boolean,
      default: true // 是否自动播放
    },
    className: {
      type: String,
      default: '' // 自定义class
    },
    borderRadius: {
      type: String,
      default: '0rpx' // item 圆角
    },
    mergeDots: {
      type: Object,
      default() {
        return {}
      }
    },
    btnId: {
      type: String,
      default: '' //
    },
    isHome: {
      type: Boolean,
      default: false
    },
    mode: {
      type: String,
      default: 'scaleToFill' //
    },
    styleObj: {
      type: String,
      default: '' //
    },
    otherParams: {
      type: Object,
      default: null
    },
    //轮播自动高度
    autoHeight:{
      type:Boolean,
      default:true
    }
  },
  data() {
    return {
      current: 0,
      dots: {
        width: 5,
        height: 2,
        bottom: 10,
        color: '#fff',
        backgroundColor: 'rgba(230, 230, 230, 1)',
        border: '1px rgba(230, 230, 230, 1) solid',
        selectedBackgroundColor: 'rgb(000, 000, 000)',
        selectedBorder: '1px rgba(000, 000, 000, .9) solid'
      },
      swiperHeight:"",
      imgHightList:[],
      system_info:{},
      swiperStyle:""
    }
  },
  created() {
    this.dots = Object.assign(this.dots, this.mergeDots);
    this.system_info=uni.getSystemInfoSync();
    this.swiperStyle=JSON.parse(JSON.stringify(this.styleObj));
  },
  methods: {
    changeItem(e) {
      this.current = e.detail.current;
      this.$emit('change', this.swiperList[this.current], this.current);
      this.swiperHeight=this.imgHightList[e.detail.current];
      this.setSwiperHeight(this.swiperHeight);
    },
    handleItemClick(e, item, index) {
      this.$emit('itemClick', { e, item, index })
    },
    imgload(item,index,e){
      this.imgHightList[index]=this.system_info.screenWidth * e.detail.height / e.detail.width;
      if(index==0){
        this.swiperHeight=this.system_info.screenWidth * e.detail.height / e.detail.width;
        this.setSwiperHeight(this.swiperHeight);
      }
    },
    //设置轮播图样式
    setSwiperHeight(height){
      let reg=/;$/;
      let reg2=/height.*;/;
      if(this.autoHeight){
        if(this.swiperStyle&&!reg.test(this.swiperStyle)){
          this.swiperStyle+=";";
        }
        let swiperHig=`height:${height}px;`;
        let reg3=/.*height.*;.*/;
        if(reg3.test(this.swiperStyle)){
          this.swiperStyle=this.swiperStyle.replace(reg2, swiperHig);
        }else{
          this.swiperStyle+=swiperHig;
        }
      }
    },
  }

}
</script>

<style lang="scss" scoped>
	.swiper-item {
		display: block;
    width: 100%;
		height: 100%;
		background: #eee;
    color: #fff;
    overflow: hidden;
	}

	.swiper-item image {
		width: 100%;
		height: 100%;
  }
  .swiper-container {
		position: relative;
		width: 100%;
		box-sizing: border-box;
		overflow: hidden;
	}

	.uni-swiper__dots-box {
		position: absolute;
		bottom: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		box-sizing: box-sizing;
		width: 100%;
	}

	.uni-swiper__dots-item {
		flex-shrink: 0;
		width: 16rpx;
		border-radius: 50%;
		margin-left: 12rpx;
		background: rgba(0, 0, 0, .3);
		transition: all 0.2s linear;
	}

	.uni-swiper__dots-item:first-child {
		margin: 0;
	}

	.uni-swiper__dots-default {
		border-radius: 50%;
	}

	.uni-swiper__dots-long {
		border-radius: 100rpx;
	}

	.uni-swiper__dots-bar {
		border-radius: 100rpx;
	}
  .uni-swiper__new-dots-box {
    position: absolute;
		bottom: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		box-sizing: box-sizing;
		width: 100%;
    .uni-swiper__dots-item {
      width: 30rpx;
      height: 4rpx;
      border-radius: 0;
      margin-left: 0;
       background: rgba(255, 255, 255, 0.5);
      transition: all 0.2s linear;
    }
    .active {
      background: rgba(255, 255, 255, 1);
    }
  }
  .uni-swiper__index-box{
    color: #fff;
    font-size: 20rpx;
    padding: 0 16rpx;
    font-weight:bold;
    line-height: 34rpx;
    position: absolute;
    right: 30rpx;
    bottom: 30rpx;
    border-radius: 17rpx;
    background: rgba(0,0,0,0.4);
  }
</style>
